<template>
  <div class="screenshot-management-page">
    <!-- 筛选条件 -->
    <el-card class="filter-card">
      <el-form :model="filterForm" inline>
        <el-form-item label="客户端">
          <el-select
            v-model="filterForm.clientId"
            placeholder="请选择客户端"
            clearable
            @change="loadScreenshots"
            style="width: 200px;"
          >
            <el-option label="全部" value="" />
            <el-option
              v-for="client in clientList"
              :key="client.id"
              :label="client.name"
              :value="client.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="截图时间">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="loadScreenshots"
          />
        </el-form-item>

        <el-form-item label="截图类型">
          <el-select
            v-model="filterForm.screenshotType"
            placeholder="请选择"
            clearable
            @change="loadScreenshots"
            style="width: 150px;"
          >
            <el-option label="全部" value="" />
            <el-option label="定时截图" value="auto" />
            <el-option label="手动截图" value="manual" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="loadScreenshots" :loading="loading">
            <el-icon><Search /></el-icon>
            查询
          </el-button>
          <el-button @click="showSettingsDialog">
            <el-icon><Setting /></el-icon>
            存储设置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 截图记录列表 -->
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="card-title">
            <el-icon><Picture /></el-icon>
            截图记录列表
          </span>
          <div class="header-actions">
            <el-button type="danger" :disabled="selectedScreenshots.length === 0" @click="batchDelete">
              <el-icon><Delete /></el-icon>
              批量删除
            </el-button>
          </div>
        </div>
      </template>

      <!-- 截图网格视图 -->
      <div class="view-mode-switch">
        <div class="view-mode-left">
          <el-checkbox
            v-if="viewMode === 'grid'"
            v-model="selectAll"
            :indeterminate="isIndeterminate"
            @change="handleSelectAll"
            class="select-all-checkbox"
          >
            全选 ({{ selectedScreenshots.length }}/{{ screenshotList.length }})
          </el-checkbox>
        </div>
        <div class="view-mode-right">
          <el-radio-group v-model="viewMode" @change="handleViewModeChange">
            <el-radio-button label="grid">网格视图</el-radio-button>
            <el-radio-button label="list">列表视图</el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <!-- 网格视图 -->
      <div v-if="viewMode === 'grid'" class="screenshot-grid" v-loading="loading">
        <div
          v-for="screenshot in screenshotList"
          :key="screenshot.id"
          class="screenshot-item"
          @click="previewScreenshot(screenshot)"
        >
          <!-- 选择框放在顶部 -->
          <div class="screenshot-checkbox-top">
            <el-checkbox
              v-model="selectedScreenshots"
              :label="screenshot"
              @click.stop
            >
              {{ screenshot.id }}
            </el-checkbox>
          </div>
          <div class="screenshot-image">
            <AuthenticatedImage
              :src="screenshot.fullUrl"
              :alt="screenshot.fileName"
              image-class="screenshot-img"
            />
            <div class="screenshot-overlay">
              <el-button type="primary" size="small" @click.stop="previewScreenshot(screenshot)">
                <el-icon><View /></el-icon>
                预览
              </el-button>
              <el-button size="small" @click.stop="downloadScreenshot(screenshot)">
                <el-icon><Download /></el-icon>
                下载
              </el-button>
              <el-button type="danger" size="small" @click.stop="deleteScreenshot(screenshot)">
                <el-icon><Delete /></el-icon>
                删除
              </el-button>
            </div>
          </div>
          <div class="screenshot-info">
            <div class="screenshot-name">{{ screenshot.fileName }}</div>
            <div class="screenshot-meta">
              <span>{{ screenshot.clientName }}</span>
              <span>{{ screenshot.captureTime }}</span>
            </div>
            <div class="screenshot-type">
              <el-tag :type="getTypeColor(screenshot.type)" size="small">
                {{ getTypeText(screenshot.type) }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>

      <!-- 列表视图 -->
      <el-table
        v-if="viewMode === 'list'"
        :data="screenshotList"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        stripe
        row-key="id"
      >
        <el-table-column type="selection" width="55" />
        <!-- 移除预览列，改为纯列表视图 -->
        <el-table-column prop="fileName" label="文件信息" min-width="300">
          <template #default="{ row }">
            <div class="file-info-detailed">
              <div class="file-name">
                <el-icon class="file-icon"><Picture /></el-icon>
                <span class="name-text">{{ row.fileName }}</span>
                <el-button
                  type="primary"
                  size="small"
                  text
                  @click="previewScreenshot(row)"
                  style="margin-left: 8px;"
                >
                  <el-icon><View /></el-icon>
                  预览
                </el-button>
              </div>
              <div class="file-meta">
                <span class="meta-item">{{ formatFileSize(row.fileSize) }}</span>
                <span class="meta-separator">•</span>
                <span class="meta-item">{{ row.resolution || '未知分辨率' }}</span>
                <span class="meta-separator">•</span>
                <span class="meta-item">{{ row.quality || '中等' }}质量</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="clientName" label="客户端" width="150">
          <template #default="{ row }">
            <div class="client-info">
              <el-tag size="small" type="info">{{ row.clientName }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="captureTime" label="截图时间" width="160">
          <template #default="{ row }">
            <div class="time-info">
              <div class="time-text">{{ row.captureTime }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="100">
          <template #default="{ row }">
            <el-tag :type="getTypeColor(row.type)" size="small">
              {{ getTypeText(row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240" fixed="right" align="center">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button type="primary" size="small" @click="previewScreenshot(row)">
                <el-icon><View /></el-icon>
                预览
              </el-button>
              <el-button size="small" @click="downloadScreenshot(row)">
                <el-icon><Download /></el-icon>
                下载
              </el-button>
              <el-button type="danger" size="small" @click="deleteScreenshot(row)">
                <el-icon><Delete /></el-icon>
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[12, 24, 48, 96]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="loadScreenshots"
          @current-change="loadScreenshots"
        />
      </div>
    </el-card>

    <!-- 图片预览对话框 -->
    <el-dialog
      v-model="previewDialogVisible"
      :width="isFullscreen ? '100%' : '90%'"
      center
      :class="{ 'fullscreen-dialog': isFullscreen }"
      :show-close="!isFullscreen"
      :fullscreen="isFullscreen"
    >
      <template #header v-if="!isFullscreen">
        <div class="preview-header">
          <h3>截图预览</h3>
          <div class="preview-info">
            <el-tag size="small">{{ currentImageName }}</el-tag>
            <span class="time-tag">{{ currentImageTime }}</span>
          </div>
          <div class="preview-actions">
            <el-button @click="toggleFullscreen" size="small" circle>
              <el-icon><FullScreen /></el-icon>
            </el-button>
          </div>
        </div>
      </template>

      <div class="image-preview-container" :class="{ 'fullscreen-container': isFullscreen }">
        <div class="image-preview" @click="toggleFullscreen">
          <AuthenticatedImage
            :src="currentImageUrl"
            :alt="currentImageName"
            :image-class="isFullscreen ? 'preview-image fullscreen-image' : 'preview-image'"
            @error="handlePreviewImageError"
            @load="handlePreviewImageLoad"
          />
          <div v-if="imageLoading" class="image-loading">
            <el-icon class="is-loading"><Loading /></el-icon>
            <span>图片加载中...</span>
          </div>
          <div v-if="imageError" class="image-error">
            <el-icon><Warning /></el-icon>
            <span>图片加载失败</span>
          </div>
          <div v-if="!isFullscreen" class="fullscreen-hint">
            <span>点击图片全屏查看</span>
          </div>
          <!-- 全屏时的退出提示 -->
          <div v-if="isFullscreen" class="fullscreen-exit-hint">
            <span>点击图片或按ESC键退出全屏</span>
          </div>
        </div>

        <div v-if="!isFullscreen" class="image-details">
          <div class="detail-item">
            <span class="label">文件名：</span>
            <span class="value">{{ currentImageName }}</span>
          </div>
          <div class="detail-item">
            <span class="label">截图时间：</span>
            <span class="value">{{ currentImageTime }}</span>
          </div>
          <div class="detail-item" v-if="currentScreenshot">
            <span class="label">客户端：</span>
            <span class="value">{{ currentScreenshot.clientName }}</span>
          </div>
          <div class="detail-item" v-if="currentScreenshot">
            <span class="label">文件大小：</span>
            <span class="value">{{ formatFileSize(currentScreenshot.fileSize) }}</span>
          </div>
          <div class="detail-item" v-if="currentScreenshot && currentScreenshot.resolution">
            <span class="label">分辨率：</span>
            <span class="value">{{ currentScreenshot.resolution }}</span>
          </div>
          <div class="detail-item" v-if="currentScreenshot">
            <span class="label">类型：</span>
            <el-tag :type="getTypeColor(currentScreenshot.type)" size="small">
              {{ getTypeText(currentScreenshot.type) }}
            </el-tag>
          </div>
        </div>
      </div>

      <template #footer v-if="!isFullscreen">
        <div class="preview-footer">
          <el-button @click="downloadCurrentImage" type="primary">
            <el-icon><Download /></el-icon>
            下载原图
          </el-button>
          <el-button @click="previewDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 存储设置对话框 -->
    <el-dialog v-model="settingsDialogVisible" title="截图存储设置" width="600px">
      <el-form :model="storageSettings" label-width="120px">
        <el-form-item label="存储路径">
          <el-input
            v-model="storageSettings.storagePath"
            placeholder="请输入存储路径"
          >
            <template #prepend>
              <el-icon><Folder /></el-icon>
            </template>
            <template #append>
              <el-button @click="selectStoragePath">
                获取默认
              </el-button>
            </template>
          </el-input>
          <div style="margin-top: 5px; color: #909399; font-size: 12px;">
            
          </div>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="settingsDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveStorageSettings">保存设置</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Picture, Search, Setting, Delete, View, Download, Folder, Loading, Warning, FullScreen
} from '@element-plus/icons-vue'
import AuthenticatedImage from '@/components/AuthenticatedImage.vue'
import { filesAPI, clientsAPI, systemAPI } from '@/services/api'

// 响应式数据
const loading = ref(false)
const viewMode = ref('grid')
const previewDialogVisible = ref(false)
const settingsDialogVisible = ref(false)
const currentImageUrl = ref('')
const currentImageName = ref('')
const currentImageTime = ref('')
const currentScreenshot = ref(null)
const imageLoading = ref(false)
const imageError = ref(false)
const isFullscreen = ref(false)
const selectedScreenshots = ref([])

// 全选相关
const selectAll = computed({
  get() {
    return screenshotList.value.length > 0 && selectedScreenshots.value.length === screenshotList.value.length
  },
  set(value) {
    // 这个setter会在handleSelectAll中处理
  }
})

const isIndeterminate = computed(() => {
  const selectedCount = selectedScreenshots.value.length
  return selectedCount > 0 && selectedCount < screenshotList.value.length
})

// 筛选表单
const filterForm = reactive({
  clientId: '',
  dateRange: null,
  screenshotType: ''
})

// 客户端列表
const clientList = ref([])

// 截图记录列表
const screenshotList = ref([])

// 分页
const pagination = reactive({
  currentPage: 1,
  pageSize: 24,
  total: 0
})

// 存储设置
const storageSettings = reactive({
  storagePath: '由服务端配置'
})

// 加载截图记录
const loadScreenshots = async () => {
  loading.value = true
  try {
    // 构建查询参数
    const params = {
      page: pagination.currentPage,
      size: pagination.pageSize
    }

    // 添加筛选条件
    if (filterForm.clientId) {
      params.clientId = filterForm.clientId
    }

    if (filterForm.dateRange && filterForm.dateRange.length === 2) {
      params.startDate = filterForm.dateRange[0].toISOString()
      params.endDate = filterForm.dateRange[1].toISOString()
    }

    if (filterForm.screenshotType) {
      params.type = filterForm.screenshotType
    }

    // 调用真实API
    const response = await filesAPI.getScreenshots(params)

    if (response.code === 200) {
      screenshotList.value = response.data.list.map(item => ({
        id: item.id,
        fileName: item.fileName,
        clientId: item.clientId,
        clientName: item.clientName,
        captureTime: new Date(item.captureTime).toLocaleString(),
        type: item.type,
        fileSize: item.fileSize,
        quality: item.quality,
        resolution: item.resolution,
        fullUrl: item.fullUrl || `/api/v1/files/screenshots/${item.id}`
      }))
      pagination.total = response.data.total
    } else {
      throw new Error(response.message || '获取截图列表失败')
    }
  } catch (error) {
    console.error('加载截图记录失败:', error)
    ElMessage.error('加载截图记录失败')
    screenshotList.value = []
    pagination.total = 0
  } finally {
    loading.value = false
  }
}

// 格式化文件大小
const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 获取类型颜色
const getTypeColor = (type) => {
  const colors = {
    auto: 'info',
    manual: 'success',
    alert: 'warning'
  }
  return colors[type] || 'info'
}

// 获取类型文本
const getTypeText = (type) => {
  const texts = {
    auto: '定时截图',
    manual: '手动截图'
  }
  return texts[type] || '未知'
}

// 处理视图模式变化
const handleViewModeChange = () => {
  // 网格视图使用不同的分页大小
  if (viewMode.value === 'grid') {
    pagination.pageSize = 24
  } else {
    pagination.pageSize = 20
  }
  loadScreenshots()
}

// 处理选择变化（列表视图）
const handleSelectionChange = (selection) => {
  selectedScreenshots.value = selection
}

// 处理全选/取消全选
const handleSelectAll = (value) => {
  if (value) {
    // 全选：将所有截图添加到选中列表
    selectedScreenshots.value = [...screenshotList.value]
  } else {
    // 取消全选：清空选中列表
    selectedScreenshots.value = []
  }
}

// 预览截图
const previewScreenshot = (screenshot) => {
  currentImageUrl.value = screenshot.fullUrl
  currentImageName.value = screenshot.fileName
  currentImageTime.value = screenshot.captureTime
  currentScreenshot.value = screenshot
  // 重置加载状态，让AuthenticatedImage组件自己处理
  imageLoading.value = true
  imageError.value = false
  previewDialogVisible.value = true
}

// 处理图片加载错误
const handleImageError = (event) => {
  // 如果缩略图加载失败，使用默认图片或隐藏
  event.target.style.display = 'none'
  ElMessage.warning('缩略图加载失败')
}

// 处理预览图片加载错误
const handlePreviewImageError = () => {
  imageLoading.value = false
  imageError.value = true
}

// 处理预览图片加载成功
const handlePreviewImageLoad = () => {
  imageLoading.value = false
  imageError.value = false
}

// 下载截图
const downloadScreenshot = async (screenshot) => {
  try {
    const token = localStorage.getItem('auth_token')
    if (!token) {
      ElMessage.error('请先登录')
      return
    }

    const downloadUrl = `/api/v1/files/screenshots/${screenshot.id}/download`

    // 使用fetch获取文件，带上认证头
    const response = await fetch(downloadUrl, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    })

    if (!response.ok) {
      throw new Error(`下载失败: ${response.status}`)
    }

    // 获取文件blob
    const blob = await response.blob()

    // 创建下载链接
    const url = URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = screenshot.fileName
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)

    // 清理URL对象
    URL.revokeObjectURL(url)

    ElMessage.success('开始下载截图文件')
  } catch (error) {
    console.error('下载截图失败:', error)
    ElMessage.error('下载截图失败')
  }
}

// 下载当前预览的图片
const downloadCurrentImage = async () => {
  if (currentScreenshot.value) {
    await downloadScreenshot(currentScreenshot.value)
  } else {
    ElMessage.error('没有可下载的图片')
  }
}

// 切换全屏模式
const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value
}

// 退出全屏
const exitFullscreen = () => {
  isFullscreen.value = false
}

// 键盘事件处理
const handleKeydown = (event) => {
  if (event.key === 'Escape' && isFullscreen.value) {
    exitFullscreen()
  }
}

// 删除截图
const deleteScreenshot = async (screenshot) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除截图文件 "${screenshot.fileName}" 吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    // 调用删除API
    const response = await filesAPI.deleteScreenshot(screenshot.id)

    if (response.code === 200) {
      // 重新加载数据
      await loadScreenshots()
      ElMessage.success('截图文件删除成功')
    } else {
      throw new Error(response.message || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除截图文件失败:', error)
      ElMessage.error('删除截图文件失败')
    }
  }
}

// 批量删除
const batchDelete = async () => {
  if (selectedScreenshots.value.length === 0) {
    ElMessage.warning('请选择要删除的截图文件')
    return
  }

  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedScreenshots.value.length} 个截图文件吗？`,
      '确认批量删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    // 调用批量删除API
    const ids = selectedScreenshots.value.map(item => item.id)
    const response = await filesAPI.batchDeleteScreenshots({ ids })

    if (response.code === 200) {
      selectedScreenshots.value = []
      // 重新加载数据
      await loadScreenshots()
      ElMessage.success('批量删除成功')
    } else {
      throw new Error(response.message || '批量删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量删除失败:', error)
      ElMessage.error('批量删除失败')
    }
  }
}



// 显示设置对话框
const showSettingsDialog = () => {
  settingsDialogVisible.value = true
}

// 选择存储路径（获取默认路径）
const selectStoragePath = async () => {
  try {
    const response = await systemAPI.getSystemInfo()
    if (response.code === 200 && response.data.fileStorage) {
      storageSettings.storagePath = response.data.fileStorage.screenshotsPath || './storage/screenshots'
      ElMessage.success('已获取当前默认存储路径')
    }
  } catch (error) {
    console.error('获取默认存储路径失败:', error)
    ElMessage.error('获取默认存储路径失败')
  }
}

// 保存存储设置
const saveStorageSettings = async () => {
  if (!storageSettings.storagePath.trim()) {
    ElMessage.warning('请输入存储路径')
    return
  }

  try {
    // 调用更新存储路径API
    const response = await systemAPI.updateStoragePath({
      screenshotsPath: storageSettings.storagePath
    })

    if (response.code === 200) {
      ElMessage.success('存储路径设置已保存，重启服务端后生效')
      settingsDialogVisible.value = false
    } else {
      throw new Error(response.message || '保存失败')
    }
  } catch (error) {
    console.error('保存存储设置失败:', error)
    ElMessage.error('保存存储设置失败')
  }
}



// 加载客户端列表
const loadClients = async () => {
  try {
    const response = await clientsAPI.getClients()
    if (response.code === 200) {
      clientList.value = response.data.list || []
    }
  } catch (error) {
    console.error('加载客户端列表失败:', error)
  }
}

// 加载服务端存储配置
const loadServerStorageConfig = async () => {
  try {
    const response = await systemAPI.getSystemInfo()
    console.log('系统信息响应:', response) // 调试日志
    if (response.code === 200 && response.data) {
      if (response.data.fileStorage && response.data.fileStorage.screenshotsPath) {
        storageSettings.storagePath = response.data.fileStorage.screenshotsPath
      } else {
        storageSettings.storagePath = '未配置'
      }
    } else {
      storageSettings.storagePath = '获取失败'
    }
  } catch (error) {
    console.error('加载服务端存储配置失败:', error)
    storageSettings.storagePath = '获取失败'
  }
}

// 组件挂载时加载数据
onMounted(() => {
  loadClients()
  loadScreenshots()
  loadServerStorageConfig()

  // 添加键盘事件监听
  document.addEventListener('keydown', handleKeydown)
})

// 组件卸载时移除事件监听
onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown)
})
</script>

<style scoped>
.screenshot-management-page {
  max-width: 1400px;
  margin: 0 auto;
}

.filter-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.view-mode-switch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.view-mode-left {
  display: flex;
  align-items: center;
}

.view-mode-right {
  display: flex;
  align-items: center;
}

.select-all-checkbox {
  font-size: 14px;
  color: #606266;
}

.select-all-checkbox .el-checkbox__label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.screenshot-item {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.screenshot-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.screenshot-checkbox-top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 12px;
  background: #ffffff;
  border-bottom: 1px solid #ebeef5;
  font-size: 12px;
  color: #606266;
}

.screenshot-checkbox-top .el-checkbox {
  font-size: 12px;
}

.screenshot-checkbox-top .el-checkbox__label {
  font-size: 12px;
  color: #606266;
  font-weight: 500;
}

.screenshot-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.screenshot-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.screenshot-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.3s;
}

.screenshot-item:hover .screenshot-overlay {
  opacity: 1;
}

.screenshot-info {
  padding: 12px;
}

.screenshot-name {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screenshot-meta {
  font-size: 12px;
  color: #909399;
  margin-bottom: 8px;
}

.screenshot-meta span {
  display: block;
  margin-bottom: 2px;
}

.screenshot-type {
  text-align: right;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-icon {
  color: #409EFF;
  font-size: 16px;
}

/* 列表视图样式 */
.table-thumbnail {
  display: flex;
  justify-content: center;
  align-items: center;
}

.thumbnail-img {
  width: 60px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s;
}

.thumbnail-img:hover {
  transform: scale(1.1);
}

.file-info-detailed {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.file-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.name-text {
  font-weight: 500;
  color: #303133;
}

.file-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #909399;
}

.meta-item {
  color: #606266;
}

.meta-separator {
  color: #DCDFE6;
}

.client-info {
  display: flex;
  justify-content: center;
}

.time-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time-text {
  font-size: 13px;
  color: #606266;
}

.action-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 220px;
  padding: 4px 0;
}

.action-buttons .el-button {
  flex-shrink: 0;
  min-width: 64px;
  height: 32px;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-buttons .el-button .el-icon {
  margin-right: 4px;
  font-size: 12px;
}

.action-buttons .el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 确保按钮文字不换行 */
.action-buttons .el-button span {
  white-space: nowrap;
}

/* 预览对话框样式 */
.preview-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.preview-header h3 {
  margin: 0;
  color: #303133;
}

.preview-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.time-tag {
  font-size: 12px;
  color: #909399;
}

.image-preview-container {
  display: flex;
  gap: 20px;
  max-height: 70vh;
}

.image-preview {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: #f5f7fa;
  border-radius: 8px;
  min-height: 400px;
}

.preview-image {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.image-loading,
.image-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #909399;
}

.image-loading .el-icon {
  font-size: 24px;
}

.image-error .el-icon {
  font-size: 24px;
  color: #F56C6C;
}

.image-details {
  width: 300px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-item .label {
  font-weight: 500;
  color: #606266;
  min-width: 80px;
}

.detail-item .value {
  color: #303133;
  flex: 1;
}

.preview-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.image-preview {
  text-align: center;
}

.preview-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.image-info {
  color: #909399;
  font-size: 14px;
}

.el-form--inline .el-form-item {
  margin-right: 20px;
  margin-bottom: 10px;
}
</style>

<style scoped>
.screenshot-management-page {
  max-width: 1400px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.placeholder-content {
  text-align: center;
  padding: 60px 20px;
  color: #909399;
}

.placeholder-icon {
  font-size: 64px;
  margin-bottom: 20px;
  color: #409EFF;
}

.placeholder-content h3 {
  margin: 0 0 10px 0;
  color: #303133;
}

.placeholder-content p {
  margin: 0;
  font-size: 14px;
}

/* 全屏相关样式 */
.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.preview-actions {
  display: flex;
  gap: 8px;
}

/* 全屏对话框样式 */
:deep(.fullscreen-dialog) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  z-index: 9999 !important;
  background: rgba(0, 0, 0, 0.9) !important;
}

:deep(.fullscreen-dialog .el-dialog) {
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:deep(.fullscreen-dialog .el-dialog__header) {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;
  right: 20px !important;
  z-index: 10000 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  border-radius: 8px !important;
  padding: 15px 20px !important;
  color: white !important;
}

:deep(.fullscreen-dialog .el-dialog__body) {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

:deep(.fullscreen-dialog .el-dialog__footer) {
  position: absolute !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: rgba(0, 0, 0, 0.7) !important;
  border-radius: 8px !important;
  padding: 15px 20px !important;
}

.fullscreen-container {
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background: transparent !important;
}

.fullscreen-container .image-preview {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: zoom-out;
  background: transparent;
}

.fullscreen-image {
  max-width: 95vw !important;
  max-height: 95vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5) !important;
}

.image-preview {
  cursor: zoom-in;
  position: relative;
}

.fullscreen-hint {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s;
}

.image-preview:hover .fullscreen-hint {
  opacity: 1;
}

.fullscreen-exit-hint {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 9999;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.fullscreen-exit-hint:hover {
  opacity: 1;
}
</style>
